import React, { Component } from 'react';
import {
    Image,StyleSheet,Text,View,TouchableOpacity,ScrollView,FlatList
} from 'react-native';
import pxToDp from '../common/comm';
import * as DATA from '../data/data';

export default class ProductItem extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            nav:this.props.nav
        };
    }

    componentWillMount() {
        for (let i = 0; i < DATA.productItem.product.length; i++){
            DATA.productItem.product[i]["key"] = i;
        }
    }
    _onPressLogo(){
        this.props.nav.navigate('Zizhi');
    }

    _onPressProduct(item){
        this.props.nav.navigate('Product',{item:item});
    }

    renderItem({item}) {
        let url = DATA.res + item.logo;
        return (
            <View style={styles.itemContainer}>
                <TouchableOpacity
                    onPress={()=>{
                        this.state.nav.navigate('Zizhi');
                    }}>
                    <Image
                        source={{uri:url}}
                        style={styles.itemLogo}
                    />
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={this._onPressProduct(item)}
                >
                    <View style={styles.itemContent}>
                        <Text style={styles.itemName}>{item.name}</Text>
                        <Text style={styles.itemTitle}>{item.title}</Text>
                        <View style={styles.itemKeys}>
                            <Text style={styles.itemkey}>{item.keyw1}</Text>
                            <Text style={styles.itemkey}>{item.keyw2}</Text>
                            <Text style={styles.itemkey}>{item.keyw3}</Text>
                        </View>
                        <Text style={styles.itemShuoming}>{item.shuoming}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        return (
            <ScrollView>
                    <FlatList
                        data={DATA.productItem.product}
                        renderItem={this.renderItem}
                    >
                    </FlatList>
            </ScrollView>
        );
    }
}

let styles = StyleSheet.create({
    itemContainer: {
        flexDirection: 'row',
        alignItems:'center',
        backgroundColor:'#fff'
    },
    itemLogo:{
        width:pxToDp(160),
        height:pxToDp(160),
        margin:pxToDp(20)
    },
    itemName:{
        fontSize:pxToDp(30),
        fontWeight:'900'
    },
    itemKeys:{
        flexDirection:'row',
        width:pxToDp(350),
        marginLeft:pxToDp(10),
        marginTop:pxToDp(10),
    },
    itemkey:{
        flex:1,
        color:'#f00',
        textAlign:'center',
    },
    itemShuoming:{
        marginTop:pxToDp(10)
    }
});
